<script setup lang="ts">
import {computed, type PropType, ref} from "vue";
import type {ParamGroupType, ParamType} from "@/type/paramType.ts";
import type { TableInstance } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Object as PropType<ParamGroupType>,
    default() {
      return []
    }
  },
  enableEdit: {
    type: Boolean,
    default: false,
  }
})
const emit = defineEmits(['update:modelValue'])
const paramTableObj = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

const selectRows = ref<ParamType[]>([])
const multipleTableRef = ref<TableInstance>()
const handleSelectionChange = (val:ParamType[]) => {
  selectRows.value = val
}
const addHandler = () => {
  paramTableObj.value.moyuSqlParamList.push({} as ParamType)
}
const deleteHandler = () => {
  const _selectRows:ParamType[] = selectRows.value
  if(_selectRows && _selectRows.length > 0){
    paramTableObj.value.moyuSqlParamList = paramTableObj.value.moyuSqlParamList?.filter(item => {
      return !_selectRows.includes(item)
    }) as ParamType[]
  }
}
</script>

<template>
  <div>
    <div>
      <el-button type="primary" @click="addHandler">添加</el-button>
      <el-button type="danger" @click="deleteHandler">删除</el-button>
    </div>
    <el-form label-width="auto" :model="paramTableObj">
      <el-table
          border
          ref="multipleTableRef"
          :data="paramTableObj.moyuSqlParamList"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="43"/>
        <el-table-column class="not-border" label="参数名称" prop="paramName">
          <template #default="{$index, column, row}">
            <el-form-item prop="paramName">
              <el-input
                  v-model="row.paramName"
                  type="textarea"
                  autosize
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column class="not-border" label="参数默认值" prop="paramValue">
          <template #default="{$index, column, row}">
            <el-form-item prop="paramValue">
              <el-input
                  v-model="row.paramValue"
                  type="textarea"
                  autosize
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column class="not-border" label="描述" prop="paramDesc">
          <template #default="{$index, column, row}">
            <el-form-item prop="paramDesc">
              <el-input
                  v-model="row.paramDesc"
                  type="textarea"
                  autosize
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column class="not-border" label="是否必填" prop="isRequired">
          <template #default="{$index, column, row}">
            <el-form-item prop="isRequired">
              <el-select
                  v-model="row.isRequired"
                  clearable
              >
                <el-option label="是" :value="true"></el-option>
                <el-option label="否" :value="false"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column class="not-border" label="参数位置" prop="paramSite">
          <template #default="{$index, column, row}">
            <el-form-item prop="paramSite">
                <el-select
                    v-model="row.paramSite"
                    clearable
                >
                  <el-option label="BODY" value="BODY"></el-option>
                  <el-option label="HEADER" value="HEADER"></el-option>
                  <el-option label="PATH" value="PATH"></el-option>
                  <el-option label="ANY" value="ANY"></el-option>
                  <el-option label="DEFAULT" value="DEFAULT"></el-option>
                </el-select>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<style scoped lang="scss">

:deep(.el-input__wrapper),
:deep(.el-select__wrapper),
:deep(.el-textarea__inner)
{
  border: unset;
  border-radius: 0;
  padding: 0 2px;
  box-shadow: none;
  background-color: unset;
}
:deep(.el-select__wrapper.is-hovering){
  box-shadow: unset;
}
:deep(.el-textarea__inner){
  resize: none;
}
:deep(.el-form-item){
  margin-bottom: 0;
}

</style>
